<template>
    <div class="gwcx">
        <div class="btndiv">
            <el-button type="primary" plain icon="el-icon-refresh" @click="fetch">刷新活动列表</el-button>
            <el-button type="primary" plain icon="el-icon-plus" @click="QualityClick">添加新活动</el-button>
        </div>
        <el-table :data="list.slice((currentPage-1)*pageItem,currentPage*pageItem)" ref="multipleTable" width="100%">
            <el-table-column prop="hd_id" label="活动id" width="80"></el-table-column>
            <el-table-column prop="hd_name" label="活动名称" width="300"></el-table-column>
            <el-table-column prop="hd_xm" label="所属项目" width="100"></el-table-column>
            <el-table-column prop="hd_ssdq" label="所属地市" width="100"></el-table-column>
            <el-table-column prop="hd_cyrs" label="参与量" width="100"></el-table-column>
            <el-table-column prop="hd_yxtime" label="活动结束时间" width="150"></el-table-column>
            <el-table-column prop="hd_xcx_path" label="小程序基本路径" width="300"></el-table-column>
            <el-table-column prop="hd_xcx_suncode" label="获取小程序码" width="300">
                <template slot-scope="scope">
                    <el-button @click="handleCreateMa(scope.$index, scope.row)" type="primary" size="small">生成小程序太阳码
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="180">
                <template slot-scope="scope">
                    <el-button @click="phoneDetail(scope.$index, scope.row)" type="warning" size="small"
                        icon="el-icon-s-custom">查看名单详情</el-button>
                    <el-button @click="handleEdit(scope.$index, scope.row)" type="success" size="small"
                        icon="el-icon-edit">编辑活动
                    </el-button>
                    <el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)"
                        icon="el-icon-delete">删除活动</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="center">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page.sync="currentPage" :page-size="pageItem" layout="total, prev, pager, next, jumper"
                :total="list.length">
            </el-pagination>
        </div>
    </div>
</template>

<script>

import { idToChinese } from './index'

export default {
    data() {
        return {
            list: [],
            currentPage: 1,
            pageItem: 10,
            QualityDialogFlag: false,
            DialogFormVisible: false,
            formData: {},
            editfile: [],
            hdtype: ''
        }
    },
    methods: {
        async fetch() {
            this.$showLoading()
            this.$http.get('/job').then(res => {
                if (res.data.status == 1) {
                    setTimeout(() => {
                        this.list = res.data.data
                        console.log(this.list)
                        this.$hideLoading()
                    }, 500);
                } else {
                    this.$message.error(res.data.msg)
                    this.$hideLoading()
                    this.$router.push('/login')
                }
            }).catch(err => {
                console.log(err)
            })
        },
        QualityClick() {
            this.$showLoading()
            this.$router.push('/gwcx/hdAddEdit')
        },
        // 编辑
        handleEdit(index, row) {
            this.$router.push(`/gwcx/hdAddEdit/${row._id}`)
        },
        // 删除
        handleDelete(index, row) {
            this.$confirm(`此操作将永久删除 "${row.hd_name}" 活动（且不可恢复）,请确认已备份完成数据。    是否继续?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.get('/job/delete', {
                    params: {
                        _id: row._id
                    }
                }).then(res => {
                    if (res.data.status == 1) {
                        this.$message.success(res.data.msg)
                        this.fetch()
                    } else {
                        this.$message.error(res.data.msg)
                    }
                }).catch(err => {
                    console.log(err)
                })
            }).catch(err => {
                console.log(err)
            });
        },
        // 创建小程序码
        handleCreateMa(index, row) {
            console.log(index, row)
        },
        // 查看活动名单
        phoneDetail(index, row) {
            this.$router.push(`/gwcx/basic/${row._id}`)
        },
        // 分页
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`)
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`)
        }
    },
    created() {
        this.fetch()
    }
}
</script>

<style>
.btndiv {
    display: flex;
    justify-content: flex-end;
    padding: 20px 0;
}
.center {
    text-align: center;
    margin: 10px 0;
}
.cell .el-button {
    margin: 5px auto;
}
.gwcx {
    padding-right: 20px;
}
</style>